<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TreeView-Lise</title>
    <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="./assets/bootstrap-table.css">
    <script src="./assets/jquery.js"></script>
    <script src="./assets/bootstrap/js/bootstrap.js"></script>
    <script src="./assets/bootstrap-table.js"></script>
    <script src="./src/bootstraptable-treeview.js"></script>

</head>

<body>
    <div style="margin:20px">
        <input type="button" id="expandAllTree" value="展开所有"  class="btn btn-defaul"/>
        <input type="button" id="collapseAllTree" value="折叠所有" class="btn btn-defaul"/>
        <table id="tree_table"></table>

    </div>
    <script>
        $(function () {
            var data = [
                {
                    id: '1',
                    name: "菜单一",
                    desc: "这是一个描述",
                    parentId:'123',
                },
                {
                    id: '2',
                    name: "菜单二",
                    desc: "这是一个描述",
                    parentId:'124',
                },
                {
                    id: '3',
                    name: "二级菜单1",
                    desc: "这是一个描述",
                    parentId:'1',
                },
                {
                    id: '4',
                    name: "二级菜单2",
                    desc: "这是一个描述",
                    parentId:'1',
                }
            ]
            $('#tree_table').bootstrapTable({
                data: data,
                sidePagination: 'server',
                pagination: false,
                treeView: true,
                treeId: "id",
                treeParentId:'parentId',
                collapseIcon: "glyphicon glyphicon-chevron-right",//折叠样式
                expandIcon: "glyphicon glyphicon-chevron-down",//展开样式
                leafIcon:"glyphicon glyphicon-th-list",//叶子节点样式
                treeField: "name",
                columns: [{
                    checkbox:true
                },{
                    field: 'name',
                    title: '名称',
                },
                {
                    field: 'desc',
                    title: '详情',
                },
                ]
            });
            $("#expandAllTree").on('click',function(){
                $('#tree_table').bootstrapTable("expandAllTree")
            })
            $("#collapseAllTree").on('click',function(){
                $('#tree_table').bootstrapTable("collapseAllTree")
            })
        });
    </script>
</body>

</html>